{block title}{$video->getTitle()}{/block}
{block description}{$video->getWebdesc()}{/block}
{block keywords}{$video->getKeyword()}{/block}

{block script}
<script src="{$basePath}/www/libs/js/videojs/video.js"></script>
<script src="{$basePath}/www/libs/js/videojs/lang/cs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  
  var watched = false;
  
  var dimensions = new Array(
    { width: "730", height: "412" },
    { width: "597", height: "337"},
    { width: "450", height: "254"}
  );
  
  var myPlayer = videojs('video_nanastroj');
  myPlayer.on('error', function(error) {});

  recalculateDimensions();
  myPlayer.ready(function(){
    recalculateDimensions();
  });
  
  var viewLink = {link addView!};
  
  myPlayer.on('play', function(e){
//    window.setInterval(updateBuffer, 1000);
//    myPlayer.preload('auto');
    if(!watched){
      watched = true;
      $.ajax({
        dataType: 'json',
        url: viewLink,
        method: 'post'
      });
    }
  });
  
  function updateBuffer(){
//    console.log(myPlayer.bufferedPercent());
  }
  
  $(window).resize(function(){
      recalculateDimensions();
  });
      
  function recalculateDimensions(){
    var width = $(window).width();

    if(width > 1183){
      setDimensions(0);
    }else if(width > 991){
      setDimensions(1);
    }else{
      setDimensions(2);
    }
  }
  
  function setDimensions(index){
    myPlayer.width(dimensions[index].width);
    myPlayer.height(dimensions[index].height);
  }
});
</script>
{/block}

{block css}
<link href="{$basePath}/www/libs/js/videojs/video-js.css" rel="stylesheet">
{include #parent}
{/block}

{block content}

<div class="col-sm-8 lesson-left-column">
  <div class="row lesson-detail">
    <div class="video col-md-12">
      <video id="video_nanastroj" class="video-js vjs-default-skin"
             controls preload="auto"
             poster="{$basePath}/content/lessons/{$video->getWebalize()}/images/{$video->getWebalize()}.jpg"
             data-setup='{"example_option":true}'>
        {*<source src="{link Video:default videoId=>$video->getId(), extension=>webm}" type="video/webm">
        <source src="{link Video:default videoId=>$video->getId(), extension=>mp4}" type="video/mp4">*}
        <source src="{$basePath}/content/lessons/{$video->getWebalize()}/videos/{$video->getWebalize()}.mp4" type="video/mp4">
        <source src="{$basePath}/content/lessons/{$video->getWebalize()}/videos/{$video->getWebalize()}.webm" type="video/webm">
        <p>Video není dostupné, zřejmě Váš prohlížeč nepodporuje HTML 5</p>
      </video>
    </div>
        
    <div class="col-md-8">
        <h1>{$video->getTitle()}</h1>
        <div class="social-likes" data-counters="no">
          <div class="facebook" title="Sdílejte na Facebooku">Facebook</div>
          <div class="twitter" title="Sdílejte na Twitteru">Twitter</div>
          <div class="plusone" title="Sdílejte na Google+">Google+</div>
        </div>
        <p>
          {$video->getDescription()}
        </p>
        <br>
        <p>
          <strong>Požadavky:</strong><br>
          {$video->getRequirements()}
        </p>
    </div>

    <div class="col-md-4">
        <span class="info duration">{$video->getDuration()} min</span>
        <span class="info level">level {$video->getLevel()}</span>   
        <span class="info style">{$video->getStyle()}</span>   
        <span class="info comments">{$commentsCount}</span>   
        <span class="info views">{$viewsCount}</span>   
    </div>
  </div>

  {control commentBanner}
  
  <div class="row comments-container">
    <h2>komentáře</h2>
    {control comment}
  </div>
</div>


<div class="col-sm-4 related-videos">
  {control videoDetailBanner}
  {foreach $relatedVideos as $relatedVideo}
  <div class="row video-container"> 
    <div class="col-xs-6 col-sm-12 col-lg-6 video-image">
      <a href="{link Lessons:detail}/{$relatedVideo['webalize']}">
        <img src="{$basePath}/content/lessons/{$relatedVideo['webalize']}/images/{$relatedVideo['webalize']}-small.jpg">
      </a>
      <span>{$relatedVideo['duration']}</span>
    </div>
    <div class="col-xs-6 col-sm-12 col-lg-6 video-data">
      <a href="{link Lessons:detail}/{$relatedVideo['webalize']}">
        <h3>{$relatedVideo['title']}</h3>
      </a>
      <span class="level">level {$relatedVideo['level']}</span>
      <span class="style">&nbsp;{$relatedVideo['style']}</span>
      <span class="comments">{$relatedVideo['comments']}</span>
      <span class="views">{$relatedVideo['views']}</span>
    </div>
  </div>   
  {/foreach}
</div>
{/block}


